<template>
  <div class="box">
    <img class="top-icon" src="../assets/images/top-icon.png" alt="" srcset="">
    <div class="title" style="margin-bottom: 0">类型占比</div>

    <div style="display: flex;justify-content: space-evenly; margin-left: -36px;top: 45px">
      <div style="width: calc((100% - 10px) / 2);position: relative">
        <dv-charts :option="option3" style="height: 210px;width: 100%"/>
        <div
          style="display: flex;justify-content: center;align-items: center;flex-direction: column;position: absolute;left: 0;right: 0;top: 80px">
          <div style="color: #FED130;font-size: 25px">45065</div>
          <div style="color: #fff;font-size: 14px">当前号码库</div>
        </div>
      </div>
      <div class="right-add">
        <div class="right-add-box1">
          <img class="slIcon" src="../assets/images/slIcon.png" alt="" srcset="">
          <img class="srIcon" src="../assets/images/srIcon.png" alt="" srcset="">
          <div
            style="display:flex;justify-content: center;text-align: center;flex-direction: column;align-items: center;height: 118px">
            <div class="num">8092</div>
            <div class="name">今日新增</div>
          </div>
          <img class="slIcon2" src="../assets/images/blIcon.png" alt="" srcset="">
          <img class="srIcon2" src="../assets/images/brIcon.png" alt="" srcset="">
        </div>
        <div class="right-add-box2">
          <img class="slIcon" src="../assets/images/slIcon.png" alt="" srcset="">
          <img class="srIcon" src="../assets/images/srIcon.png" alt="" srcset="">
          <div style="display:flex;justify-content: center;text-align: center;flex-direction: column;align-items: center;height: 118px">
            <div class="num">8092</div>
            <div class="name">今日释放</div>
          </div>
          <img class="slIcon2" src="../assets/images/blIcon.png" alt="" srcset="">
          <img class="srIcon2" src="../assets/images/brIcon.png" alt="" srcset="">
        </div>
      </div>
    </div>
    <img class="left-icon" src="../assets/images/left-icon.png" alt="" srcset="">
    <img class="right-icon" src="../assets/images/right-icon.png" alt="" srcset="">
  </div>
</template>

<script>
export default {
  data() {
    return {
      option3: {
        series: [
          {
            type: 'pie',
            data: [
              {name: '房产电话', value: 93},
              {name: '诈骗电话', value: 66},
              {name: '快递电话', value: 52},
              {name: '保险销售', value: 34},
              {name: '推销电话', value: 22},
              {name: '汽车销售', value: 40},
              {name: '保险销售', value: 100},
            ],
            radius: ['45%', '65%'],
            insideLabel: {
              // show: false
            },
            outsideLabel: {
              labelLineEndLength: 10,
              formatter: '\n{name}',// {percent}%
              style: {
                fontSize: 14,
                fill: '#fff'
              }
            }
          }
        ],
        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
      }
    }
  },
  created() {
      this.get()
  },
  methods: {
    get(){
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  width: 738px;
  height: 275px;
  background-image: url("../assets/images/box1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  padding-top: 25px;
  margin: 0 auto;

  .row-item {
    justify-content: space-between;
  }

  .top-icon {
    width: 160px;
    height: 20px;
    position: absolute;
    top: 0px;
    right: 95px;
  }

  .title {
    display: flex;
    font-size: 18px;
    color: #23CEFD;
    margin-left: 30px;
  }

  .left-icon {
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .right-icon {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .srIcon, .slIcon {
    width: 8px;
    height: 8px;
    position: absolute;
  }

  .srIcon {
    right: 20px;
  }

  .slIcon {
    left: 20px;
  }

  .right-add {
    //height: 118px;
    margin-left: 60px;

    .right-add-box1 {
      position: relative;
      height: 118px;
      background-image: url("../assets/images/box4.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 223px;

      .srIcon, .slIcon {
        width: 8px;
        height: 8px;
        position: absolute;
        margin-top: 20px;
      }

      .srIcon2, .slIcon2 {
        width: 8px;
        height: 8px;
        position: absolute;
      }

      .srIcon {
        right: 20px;
      }

      .slIcon {
        left: 20px;
      }

      .srIcon2 {
        right: 20px;
        bottom: 10px;
      }

      .slIcon2 {
        left: 20px;
        bottom: 10px;
      }

      .num {
        color: #58DBFF;
        font-size: 36px;
        font-weight: bold;
      }

      .name {
        font-size: 18px;
        color: #FFFFFF;
        font-weight: 500;
      }
    }

    .right-add-box2 {
      position: relative;
      height: 118px;
      background-image: url("../assets/images/box4.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 223px;


      .srIcon, .slIcon {
        width: 8px;
        height: 8px;
        position: absolute;
        margin-top: 20px;
      }

      .srIcon2, .slIcon2 {
        width: 8px;
        height: 8px;
        position: absolute;
      }

      .srIcon {
        right: 20px;
      }

      .slIcon {
        left: 20px;
      }

      .srIcon2 {
        right: 20px;
        bottom: 10px;
      }

      .slIcon2 {
        left: 20px;
        bottom: 10px;
      }

      .num {
        color: #58DBFF;
        font-size: 36px;
        font-weight: bold;
      }

      .name {
        font-size: 18px;
        color: #FFFFFF;
        font-weight: 500;
      }
    }
  }
}
</style>
